<script setup>
import BlogTop from '../components/BlogTop.vue';
import { ref } from 'vue'
import Attention from '../components/MessageComponents/AttentionComponent.vue'
import Comments from '../components/MessageComponents/CommentComponent.vue'
import Infos from '../components/MessageComponents/InformComponent.vue'
import Likes from '../components/MessageComponents/LikeComponent.vue'

import BlogBottom from '../components/BlogBottom.vue';


const activeName = ref('first')


</script>

<template>
  <!-- 导航栏 -->
  <BlogTop></BlogTop>
  <div class="message">
    <div class="content">
      <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        tab-position="left"
      >
        <div class="item">
          <el-tab-pane label="评论" name="first"><Comments /></el-tab-pane>
          <el-tab-pane label="关注" name="second"><Attention/></el-tab-pane>
          <el-tab-pane label="点赞" name="third"><Likes /></el-tab-pane>
          <el-tab-pane label="系统通知" name="fourth"><Infos /></el-tab-pane>
        </div>
      </el-tabs>
    </div>
  </div>
  <!-- 版权 -->
  <BlogBottom></BlogBottom>
   
</template>

<style lang="less" scoped>
  .message{
    display: flex;
    justify-content: center;
    margin-bottom: 160px;
    
    .content{
      padding: 10px;
      margin-top: 90px;
      width: 60%;
      height: 500px;
      border-radius: 5px;
      
      .item {
        margin: 0 20px;
        border-radius: 5px;
        background-color: #fff;
        
      }
    }
    
  }
  
</style>
<style>
  /* 左导航栏背景色 */
  .el-tabs--card>.el-tabs__header .el-tabs__nav{
    background-color: #fff;
    border-radius: 5px;
  }
  /* 左导航栏标签块 */
  .el-tabs--left.el-tabs--card .el-tabs__item.is-left{
    margin: 10px 0;
    width: 110px;
    text-align: center;
    border: none;

  }
  /* 鼠标浮过样式 */
  .el-tabs--left.el-tabs--card .el-tabs__item.is-left:hover{
    color: #84AF9B;
    background-color: #f5f5f5;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav{
    border: none;
  }
  .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active{
    border: none;
  }
  .el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child{
    border: none;
  }
  /* 选中颜色 */
  .el-tabs__item.is-active{
    color: #84AF9B;
    background-color: #f5f5f5;
  }
</style>
